<template>
	<img :class="className" :src="url" />
</template>
<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
	url: String,
	type: {
		type: String,
		default: 'layout',
	},
});

const className = computed(() => {
	const { type } = props;
	return [
		'thumbnail-container',
		{
			'thumbnail-circle': type === 'circle',
			'thumbnail-layout': type === 'layout',
		},
	];
});
</script>
<style lang="less" scoped>
@import url('@/style/index.less');

.thumbnail {
	&-container {
		display: inline-block;
	}

	&-circle {
		border-radius: var(--td-radius-circle);
	}

	&-layout {
		width: 88px;
		height: 48px;
	}
}
</style>
